<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { artAddChannelService,artEditChannelService } from '../../../api/article';
const dialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
    name: '',
    alias: ''
});
const props = defineProps({
    channels:{ type: Array, required:true }
});
const emit = defineEmits(['handleForm','success'])
const rules = {
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    alias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ]
};

let isEditMode = false;
let originalRow = null;


const open = ({ row }) => {
  dialogVisible.value = true;
  isEditMode = !!row;
  
  // 新增：清除表单之前的校验状态
  if (formRef.value) {
    formRef.value.clearValidate();
  }

  if (isEditMode) {
    form.value = { ...row };
    originalRow = { ...row };
  } else {
    form.value = { name: '', alias: '' };
    originalRow = null;
  }
};

const handleDialogClose = () => {
  form.value = { name: '', alias: '' };
  if (formRef.value) {
    formRef.value.clearValidate();
  }
  isEditMode = false;
  originalRow = null;
};

const onSubmit = async() => {
    try {
        await formRef.value.validate();
        
        let result;
        if(isEditMode) {
            result = await artEditChannelService({
                id: form.value.id,
                name: form.value.name, 
                alias: form.value.alias 
            });
            console.log('编辑响应:', result); // 添加日志
        } else {
            result = await artAddChannelService({
                name: form.value.name, 
                alias: form.value.alias
            });
            console.log('添加响应:', result); // 添加日志
        }
        
        // 检查响应结果
        if (result.data.code === '0000') {
            emit('handleForm', { formData: {...form.value}, isEdit: isEditMode, originalRow });
            dialogVisible.value = false;
            ElMessage.success(isEditMode ? '编辑成功！' : '添加成功！');
            emit('success');
        } else {
            ElMessage.error(result.msg || '操作失败！');
        }
    } catch(error) {
        console.error('操作错误:', error); // 添加错误日志
        ElMessage.error(error.response?.data?.msg || '请检查表单输入是否正确！');
    }
};

defineExpose({ open });
</script>

<template>
    <el-dialog
        :title="isEditMode?'编辑分类':'添加分类'"
        v-model="dialogVisible"
        width="500"
        @close="handleDialogClose">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="alias">
                <el-input v-model="form.alias" placeholder="请输入分类别名"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>